<template>
  <div>
    <!-- 折线图的容器 -->
    <div ref="lineChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SlidingLineChart',
  data () {
    return {
      chart: null, // ECharts 实例
      warningData: [], // 预警值数据
      calculatedTempData: [], // 计算壳温数据
      measuredTempData: [], // 测量壳温数据
      maxPoints: 20, // 折线图上最多显示的点数
      interval: null, // 定时器
      startTime: 0 // 起始时间（单位：毫秒）
    }
  },
  methods: {
    // 初始化折线图
    initChart () {
      const chartDom = this.$refs.lineChart
      this.chart = echarts.init(chartDom)

      // 初始化三条折线的空数据
      this.warningData = Array(this.maxPoints).fill(70) // 假设预警值固定为 70
      this.calculatedTempData = Array(this.maxPoints).fill(0)
      this.measuredTempData = Array(this.maxPoints).fill(0)

      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['预警值', '计算壳温', '测量壳温']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Array.from({ length: this.maxPoints }, (_, i) => `${(i * 0.5).toFixed(1)} ms`) // x 轴每 0.5 ms
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 150 // 将最大值设置为 150℃
        },
        dataZoom: [
          {
            type: 'slider', // 滑动条样式
            start: 80, // 初始显示数据范围的百分比起始点
            end: 100, // 初始显示数据范围的百分比结束点
            throttle: 100, // 控制滑动条响应的频率
          }
        ],
        series: [
          {
            name: '预警值',
            type: 'line',
            data: this.warningData,
            smooth: true,
            lineStyle: {
              color: '#FF0000' // 红色线条表示预警值
            }
          },
          {
            name: '计算壳温',
            type: 'line',
            data: this.calculatedTempData,
            smooth: true,
            lineStyle: {
              color: '#244BFF' // 蓝色线条表示计算壳温
            }
          },
          {
            name: '测量壳温',
            type: 'line',
            data: this.measuredTempData,
            smooth: true,
            lineStyle: {
              color: '#00FF00' // 绿色线条表示测量壳温
            }
          }
        ]
      }

      this.chart.setOption(option)

      // 开始动态更新数据
      this.startUpdatingData()
    },
    // 开始动态更新数据
    startUpdatingData () {
      this.interval = setInterval(() => {
        // 随机生成新的计算壳温和测量壳温数据点
        const newCalculatedTemp = Math.round(Math.random() * 150)
        const newMeasuredTemp = Math.round(Math.random() * 150)

        // 移除最早的一个数据点，并添加新的数据点
        this.calculatedTempData.shift()
        this.calculatedTempData.push(newCalculatedTemp)

        this.measuredTempData.shift()
        this.measuredTempData.push(newMeasuredTemp)

        // 更新 x 轴标签
        this.startTime += 0.5 // 每次增加 0.5 ms
        const xData = Array.from({ length: this.maxPoints }, (_, i) => `${((this.startTime - (this.maxPoints - 1 - i) * 0.5)).toFixed(1)} ms`)

        // 更新图表的数据
        this.chart.setOption({
          xAxis: {
            data: xData
          },
          series: [
            { data: this.warningData }, // 预警值保持不变
            { data: this.calculatedTempData }, // 更新计算壳温数据
            { data: this.measuredTempData } // 更新测量壳温数据
          ]
        })
      }, 1000) // 每秒更新一次数据
    }
  },
  mounted () {
    // 组件挂载后初始化图表
    this.initChart()
  },
  beforeDestroy () {
    // 销毁定时器和 ECharts 实例，防止内存泄漏
    if (this.interval) {
      clearInterval(this.interval)
    }
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style scoped>
/* 图表的容器样式 */
div {
  width: 100%;
  height: 100%;
}
</style>
